<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">员工信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="4" class="avatarClass">
            <pan-thumb :image="image" />
            <image-cropper
              v-show="imagecropperShow"
              :key="imagecropperKey"
              :params="fileParams"
              :width="300"
              :height="300"
              url="/base/attachment/upload"
              @close="close"
              @crop-upload-success="cropSuccess"
            />
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-upload"
              @click="imagecropperShow = true"
            >
              上传头像
            </el-button>
          </el-col>
          <el-col :span="20">
            <el-form-item label="登录名:" prop="account">
              <el-input
                clearable
                :disabled="fromdata.id ? true : false"
                v-model="fromdata.account"
              />
            </el-form-item>
            <el-form-item label="入职时间:" prop="entryTime">
              <el-date-picker
                style="width: 203px"
                v-model="fromdata.entryTime"
                align="right"
                type="date"
                placeholder="入职时间"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd hh:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="任职门店:" prop="storeId">
              <job-shop v-model="fromdata.storeId" placeholder="任职门店" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="职位:" prop="roleIdList">
              <el-select
                clearable
                ref="dragSelect"
                v-model="fromdata.roleIdList"
                multiple
                filterable
                remote
                @focus="roleFocus"
              >
                <el-option
                  v-show="false"
                  v-for="item in roleIdListDict"
                  :key="item.id"
                  :value="item.id"
                  :label="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="密码:" prop="loginPwd">
              <el-input clearable v-model.number="fromdata.loginPwd" />
            </el-form-item>
            <el-form-item v-if="!fromdata.id" label="确认密码:" prop="confirmPwd">
              <el-input clearable v-model.number="fromdata.confirmPwd" />
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-switch
                v-model="fromdata.status"
                style="width: 203px"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-text="fromdata.status ? '启用' : '禁用'"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="顾问类型:" prop="counselorType">
              <el-select
                clearable
                ref="dragSelect"
                v-model="fromdata.counselorType"
                class="drag-select"
              >
                <el-option
                  v-for="item in dictArry['顾问类型']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="员工编号:" prop="code">
              <el-input clearable v-model="fromdata.code" />
            </el-form-item>
            <el-form-item label="基础薪资:" prop="baseSalary">
              <el-input clearable v-model="fromdata.baseSalary" />
            </el-form-item>
            <el-form-item label="岗位薪资:" prop="postSalary">
              <el-input clearable v-model="fromdata.postSalary" />
            </el-form-item>
            <el-form-item label="是否销售" prop="isSale" v-show="fromdata.counselorType == '售前顾问'">
              <el-radio-group v-model="fromdata.isSale" style="width: 203px">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata2"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">个人信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="姓名:" prop="userName">
            <el-input clearable v-model="fromdata.userName" />
          </el-form-item>
          <el-form-item label="电话:" prop="phone">
            <el-input clearable v-model.number="fromdata.phone" />
          </el-form-item>
          <el-form-item label="微信:" prop="weChat">
            <el-input clearable v-model="fromdata.weChat" />
          </el-form-item>
          <el-form-item label="出生日期:" prop="birthday">
            <el-date-picker
              v-model="fromdata.birthday"
              style="width: 203px"
              align="right"
              type="date"
              placeholder="出生日期:"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="性别" prop="genderCst">
            <el-radio-group v-model="fromdata.genderCst" style="width: 203px">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱:" >
            <el-input clearable v-model="fromdata.email" />
          </el-form-item>
          <el-form-item label="QQ:" prop="qq">
            <el-input clearable v-model="fromdata.qq" />
          </el-form-item>
          <el-form-item label="身份证:">
            <el-input clearable v-model="fromdata.idcard" />
          </el-form-item>
          <el-form-item label="住址:" prop="address">
            <el-input clearable v-model="fromdata.address" />
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button @click="saveForm">保存</el-button>
        </el-row>
      </el-form>
    </template>
    <template #dialog>
      <RoleTable
        @roleIdListSelectCheck="roleIdListSelectCheck"
        :checkList="fromdata.roleIdList"
      />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from "@/mixins/base";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
import { JobShop } from "@/components/index";
import { rules } from "./rules/index";
import RoleTable from "./component/roleTable";
import { getDict, parseTime, getImageUrl } from "@/utils/index";
import { addUserEdit, getUserId } from "@/api/after-sale/personnel/index";
import { accountCheck } from "@/utils/rulesFunction";
export default {
  components: {
    ImageCropper,
    PanThumb,
    JobShop,
    RoleTable,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      disabled: false,
      imagecropperShow: false,
      imagecropperKey: 0,
      fileParams: {
        prefixMenu: 'image',
      },
      image: '',
      fromdata: {
        id: '',
        headPortrait: '', // 头像
        account: '', // 登录名
        entryTime: '', // 入职时间
        storeId: '', // 任职门店
        roleIdList: [], // 职位集合
        loginPwd: '', // 密码
        confirmPwd: '', // 确认密码
        status: true, // 状态
        counselorType: '无', // 顾问类型
        compensation: '', // 薪资
        isSale: 0, // 是否销售
        code: '', // 员工编号
        //  个人信息
        userName: '', // 姓名
        phone: '', // 电话
        weChat: '', // 微信
        birthday: '', // 出生日期、
        genderCst: '男', // 性别
        email: '', // 邮箱
        qq: '', // QQ
        idcard: '', // 身份证
        address: '', // 住址
      },
      rules: {
        ...rules,
        confirmPwd: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value && this.fromdata.loginPwd == value) {
                callback();
              } else {
                callback('密码一致');
              }
            },
          },
        ],
        account: [{ required: true, trigger: 'blur', validator: accountCheck }],
        roleIdList: [{ required: true, trigger: 'change', message: '请选择职位' }],
      },
      dialogImageUrl: '',
      imageDialogVisible: false,
      roleIdListDict: [], // 职位选中数据
      dictArry: [],
    };
  },
  methods: {
    // 保存表单
    saveForm() {
      if(!this.fromdata.headPortrait){
        this.$message.error('请上传用户头像')
        return;
      }
      this.$refs['fromdata'].validate((valid) => {
        this.$refs['fromdata2'].validate((validate) => {
          if (valid && validate) {
            addUserEdit(this.fromdata).then((res) => {
              let { success } = res;
              if (success) {
                this.$message.success('保存成功');
                this.$router.push({
                  path: '/personnel/employee'
                })
              }
            });
          }
        });
      });
    },
    // 职位选择
    roleIdListSelectCheck(select) {
      this.roleIdListDict = [];
      this.fromdata.roleIdList = [];
      if (Array.isArray(select) && select.length > 0) {
        select.forEach((item) => {
          this.roleIdListDict.push({
            id: item.id,
            value: item.roleName,
          });
          this.fromdata.roleIdList.push(item.id);
        });
      }
      this.dialogClose();
    },
    roleFocus() {
      this.handleDataInsert('职位列表');
    },
    // 头像上传
    cropSuccess(resData) {
      this.fromdata.headPortrait = resData.id;
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      this.image = getImageUrl(resData.id);
    },
    // 关闭头像上传框
    close() {
      this.imagecropperShow = false;
    },
  },
  mounted() {
    let arry = getDict(['顾问类型', '性别', '汽车项目类型', '门店类型']);
    this.dictArry = arry;
    let { userId } = this.$route.query;
    if (userId) {
      this.disabled = true
      getUserId(userId).then((res) => {
        let { success, data } = res;
        if (success) {
          this.fromdata = { ...data, roleIdList: data.roleIds.split(',') };
          this.rules.account[0].required = false;
          this.image = getImageUrl(data.headPortrait);
          // 拆分职位数组
          let ri = data.roleIds.split(','),
            rv = data.roleNames.split(',');
          for (let i = 0; i < ri.length; i++) {
            this.roleIdListDict.push({
              id: ri[i],
              value: rv[i],
            });
          }
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.avatarClass {
  text-align: center;
}
</style>
